<template>
    <div>
        <div v-show="attentionList.length<=0">
            你没有关注任何人
        </div>
        <div>
            <div v-for="attention in attentionList" :key="attention.attention.attention_id" >
                <div class="flex-bettwen">
                    <div class="flex-vertical">
                        <el-link href.top="" target="_self" :underline="false" >
                            <h3 class="flex-center">
                                <img style="height: 30px; width:30px" :src="attention.user.user_avatar" alt="头像">
                                {{ attention.user.username }}
                            </h3>
                        </el-link>
                        <div class="date-info">
                            关注时间：<span>{{ attention.attention.attend_date }}</span>
                        </div>
                    </div>  
                    <div>
                        <button class="btn-attention" 
                        @click='isAttenion(attention.attention.attention_id,attention.attention.isAttend)'>
                            {{attention.attention.isAttend?'已关注':'关注'}}
                        </button>
                    </div>           
                </div> 
                <el-divider></el-divider>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .flex-center{
        display: flex;
        align-items: center;
    }
    .flex-vertical{
        display: flex;
        flex-direction: column;
        justify-content: left;
    }
    .el-link{
        justify-content: start;
    }
    .flex-bettwen{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .btn-attention{
        width: 80px;
        height: 30px;
        background: none;
        border: 1px solid #DCDFE6;
        border-radius: 15px;
    }
    .btn-attention:hover{
        color: #409EFF;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
    }
    .date-info{
        font-size: 14px;
        color: #848485;
    }

</style>

<script>
import { baseurl } from '@/param';
export default {
    name:'MyAttention',
    data () {
        return {
            attentionList:[],
            userId:parseInt(JSON.parse(sessionStorage.getItem('userInfo')).userid),
        }
    },
    methods: {
        //关注或取关
        isAttenion(id,isAttend){  
            axios.delete(`${baseurl}/forum/cancelAttention`,{
                data:{
                    attention_id:id,
                    isAttend:isAttend?0:1
                },
                headers:{
                    'Authorization':sessionStorage.getItem('Authorization')
                }
            }).then(res=>{
                if(res.data.code){
                    for (const a of this.attentionList) {
                        if(a.attention.attention_id==id){
                            console.log('修改后的值:'+a.attention.isAttend);
                            //取关，赋值为0，渲染关注文字 关注，赋值为1，渲染已关注文字
                            a.attention.isAttend?a.attention.isAttend=0:a.attention.isAttend=1
                        }
                    }
                }
            }).catch(err=>console.log(err.message))
        },
        getAttention(){
            axios.get(`${baseurl}/forum/queryAttentionByUserId/${this.userId}`,{
                headers:{
                    'Authorization':sessionStorage.getItem('Authorization')
                } 
            })
            .then(res=>{
                if(res.data.code){
                    this.attentionList=res.data.data
                }
            }).catch(err=>console.log(err.message))
        }
    },
    mounted(){
        this.getAttention()
    }

}
</script>